@import "./_less/index";

@px: 1px;

.list-wrap{
   position: relative;
}

//路由用css
#pageloading{
    background:url(/images/loading1.gif) no-repeat center center;
    position:absolute;
    top:0;left:0;right:0;bottom:0;width:100%;height:100%;
}
.router-container{
    width: 100%;
    height: 100%;
    position: fixed;
    // left:100%;
    left:0;
    top:0;
    opacity: 1;
    overflow: hidden;
    z-index: -1;


    -webkit-transition:.4s;
    transition:.4s;
    // display:none;

    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}

.router-container-block{
    // display:block;
    z-index: 10;
    // -webkit-animation-name: anim-routerin;
    // animation-name: anim-routerin;
    // -webkit-animation-duration: 0.4s;
    // animation-duration: 0.4s;
    // -webkit-animation-fill-mode: forwards;
    // animation-fill-mode: forwards;

    //-webkit-animation: anim-routerin 0.4s forwards;

    // left: 0;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.router-container-reblock{
    // display:block;
    z-index: 10;
    // -webkit-animation-name: anim-routerin2;
    // animation-name: anim-routerin2;
    // -webkit-animation-duration: 0.4s;
    // animation-duration: 0.4s;
    // -webkit-animation-fill-mode: forwards;
    // animation-fill-mode: forwards;

    //-webkit-animation: anim-routerin2 0.4s forwards;
    // left: 0;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.router-container-hidden{
    // display:block;
    z-index: -1;
    // -webkit-animation-name: anim-routerout;
    // animation-name: anim-routerout;
    // -webkit-animation-duration: 0.4s;
    // animation-duration: 0.4s;
    // -webkit-animation-fill-mode: forwards;
    // animation-fill-mode: forwards;

    //-webkit-animation: anim-routerout 0.4s forwards;
    // left: -100%;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

.router-container-rehidden{
    // display:block;
    z-index: -1;
    // -webkit-animation-name: anim-routerout2;
    // animation-name: anim-routerout2;
    // -webkit-animation-duration: 0.4s;
    // animation-duration: 0.4s;
    // -webkit-animation-fill-mode: forwards;
    // animation-fill-mode: forwards;

    //-webkit-animation: anim-routerout2 0.4s forwards;
    // left: 100%;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}

// @-webkit-keyframes anim-routerin {
// 	0% { -webkit-transform: translate3d(1000px,0,0); opacity: 0;}
// 	100% { -webkit-transform: translate3d(0,0,0); opacity: 1 }
// }
//
// @keyframes anim-routerin {
// 	0% { -webkit-transform: translate3d(1000px,0,0); opacity: 0 }
// 	100% { -webkit-transform: translate3d(0,0,0); opacity: 1 }
// }
//
// @-webkit-keyframes anim-routerin2 {
// 	0% { -webkit-transform: translate3d(-1000px,0,0); opacity: 0;}
// 	100% { -webkit-transform: translate3d(0,0,0); opacity: 1 }
// }
//
// @keyframes anim-routerin2 {
// 	0% { -webkit-transform: translate3d(-1000px,0,0); opacity: 0 }
// 	100% { -webkit-transform: translate3d(0,0,0); opacity: 1 }
// }
//
// @-webkit-keyframes anim-routerout {
// 	0% { -webkit-transform: translate3d(0,0,0); opacity: 1 }
// 	// 50% { transform: translate3d(-1000,0,0); opacity: 0 }
// 	100% { -webkit-transform: translate3d(-1000px,0,0); opacity: 0 }
// }
//
// @keyframes anim-routerout {
// 	0% { -webkit-transform: translate3d(0,0,0); opacity: 1 }
//     // 50% { transform: translate3d(-1000,0,0); opacity: 0 }
// 	100% { -webkit-transform: translate3d(-1000px,0,0); opacity: 0 }
// }
//
// @-webkit-keyframes anim-routerout2 {
// 	0% { -webkit-transform: translate3d(0,0,0); opacity: 1 }
// 	// 50% { transform: translate3d(-1000,0,0); opacity: 0 }
// 	100% { -webkit-transform: translate3d(1000px,0,0); opacity: 0 }
// }
//
// @keyframes anim-routerout2 {
// 	0% { -webkit-transform: translate3d(0,0,0); opacity: 1 }
//     // 50% { transform: translate3d(-1000,0,0); opacity: 0 }
// 	100% { -webkit-transform: translate3d(1000px,0,0); opacity: 0 }
// }




//水平列表
.hlist(){
   list-style: none;
   font: normal normal normal 14px/150% Arial,Verdana,"微软雅黑";
   margin: 0;
   padding: 0;
   .item{
       .inner{ }
       height: auto;
       position: relative;
       img{
           width: 100%;
           border: 0;
       }
       p{
           padding: 0;
           margin: 0;
       }
       a{
           text-decoration: none;
           border: none;
           &.caption{
               font-size: 12*@px;
               text-align: center;
           }
       }
       em{
           font-style: normal;
       }
       ul{
           li {}
       }
       .hheader{
           padding: 10px;
           ul{
               li{}
           };
       }
       .hbody{
           padding: 10px;
           .caption{
               text-align: center;
           }
           ul{
               li{}
           }
       }
       .hfoot{
           padding: 10px;
           ul{
               li{ }
           }
       }
       .dot{
           position: absolute;
           ul{
               li{ }
           }
       }
       .pics{}
   }
}
